<template>
  <div class="image-upload-box">
    <!--
      action: 设置图片上传的接口地址
      list-type	文件列表的类型 --- 样式
      http-request：覆盖action属性，自定义上传文件夹
          :file-list="flieList"实现图片的数据回显
     -->
    <!--     :class="{'iamge-upload':flieList.length>0}"是设置动态类名
     当：后面的语句是true的时候添加这个类名，false的时候不添加这个类名
      -->
    <el-upload
      :class="{'iamge-upload':flieList.length>0}"
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :file-list="flieList"
      :limit="limit"
      :on-remove="removeFn"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进入条 上传完成的隐藏进度条-->
    <el-progress v-if="percent>0&&percent<100" type="circle" :percentage="percent" />
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDa0AAAtLfpkOlrgEUUDk8XgX7ZkeHdiW3',
  SecretKey: 'HH0RbU6RVHm0xd29zYqqZ1B4g14rNbYE'
})
export default {
  data() {
    return {
      flieList: [],
      limit: 1,
      percent: 0
    }
  },
  methods: {
    uploadFn(data) {
      this.flieList.push({
        url: ''
      })
      //   上面的设置是为了动态类名的判定从一开始就可以有值
      // data里面的file对象才是真正上传给后端的图片对象
      console.log(data)
      //
      cos.putObject({
        Bucket: 'hr-renzi-1313158760', /* 必须 储存桶的名字*/
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: (Date.now()).toString(), /* 必须 字符串，上传到腾讯云的文件名字*/
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        // onProgress返回的是图片上传的进度
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          //   显示的是百分比所以*100
          //   const number = Math.floor(progressData.percent * 100)
          //   解决小数点位数过多出现的bug（在图片过大的时候
          //   toFixed(2)保留两位
          const number = parseInt(progressData.percent * 100)
          this.percent = number
        }
      },
      //   function(err, data)
      (err, data) => {
        // 如果成功的话，err是空，不成功的话err返回的是一个对象
        console.log(err || data)
        console.log(this)
        // 这里是获取不到this的，因为作用域的问题，把function(err, data)换成箭头函数
        // 因为箭头函数没有this，所以改完之后的this他会指向cos.putObject，再上一级的uploadFn(data)
        // 就可以指向到
        if (!err) {
        //   this.flieList.push({
        //     url: 'http://' + data.Location
        // 到这里为止可以无限添加，加上删除掉的东西，再次添加的时候会出现之前的全部东西
        // 用这个方法会出现延迟，因为判断的方法需要后台返回数据之后，动态类名才可以判定
        // 所以在一开始就给他设置空值，这样速度就比较快
        // 这样前面用了push，后面就不能再push了不然会有两个，所以有了下面的语句
        //   })
          this.flieList[0].url = 'http://' + data.Location
        }
      })
    },
    removeFn() {
      this.flieList = []
    }
  }
}
</script>
<style scoped lang="scss" >
// 在类名前面加>>> 或者::v-deep，是为了样式穿透，但是不一定都有效
// 可以另外设置全局的style设置样式
.image-upload-box{
    position: relative;
    display: inline-block;
    .el-progress{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-55%);
    }
}
</style>

<style lang='scss'>
.iamge-upload{
    .el-upload--picture-card{
        display: none;
    }
}

</style>
